/**
 * @author kristian
 */
var grid1_on = true;
var grid2_on = false;
var grid3_on = false;
var coords_on = false;
var compass_on = false;

var compass_corner = 'SW';

var gridChoiceHandler = function(){
    switch (this.name) {
        case 'grid1':
            grid1_on = !grid1_on;
            break;
        case 'grid2':
            grid2_on = !grid2_on;
            break;
        case 'grid3':
            grid3_on = !grid3_on;
            break;
		case 'coords':
			coords_on = !coords_on;
			break;
		case 'compass':
			compass_on = !compass_on;
			break;
    }
    draw();
}

var check = function (id, state) {
	if (state) {
		$('#content').checkCheckboxes('#' + id);
	}
	else {
		$('#content').unCheckCheckboxes('#' + id);
	}
}

var checkThem = function (arr) {
	for each (var ch in arr) {
		check(ch.id, ch.state);
	}
}

var terrainSelected = "water";
var decorSelected;
var pathSelected;

var toggleTerrainSelected = function() {
	if (terrainSelected)
		$('#' + terrainSelected).toggleClass('selected');
				
	$(this).toggleClass('selected');

	if (decorSelected)
		$('#' + decorSelected).removeClass('selected');	
	if (pathSelected)
		$('#' + pathSelected).removeClass('selected');


	decorSelected	= null;				
	pathSelected	= null;
	terrainSelected = this.id;
	return false;
}

var toggleDecorSelected = function() {
	if (decorSelected)
		$('#' + decorSelected).toggleClass('selected');
		
	$(this).toggleClass('selected');
	
	if (terrainSelected)
		$('#' + terrainSelected).removeClass('selected');		
	if (pathSelected)
		$('#' + pathSelected).removeClass('selected');


	terrainSelected	= null;
	pathSelected	= null;
	decorSelected = this.id;
	return false;
}

var togglePathSelected = function() {
	if (pathSelected)
		$('#' + pathSelected).toggleClass('selected');
		
	$(this).toggleClass('selected');
	
	if (terrainSelected)
		$('#' + terrainSelected).removeClass('selected');		
	if (decorSelected)
		$('#' + decorSelected).removeClass('selected');

	terrainSelected	= null;
	decorSelected	= null;	
	pathSelected = this.id;
	console.log('pathSelected:' + pathSelected);
	return false;
}

var ctx;

var initGridOptions = function() {
	grid_Options.grid1 = 
		init(ctx, {
			    gridSize: gridSize,
			    scale: {x:60, y:70},
			    color: "rgba(0,0,0,1)",
			    textureOn: true
			}
		);
	grid_Options.grid2 = init(ctx, {
	    gridSize: gridSize2,
	    scale: {x:30, y:35},
	    color: "rgba(185,75,115,0.5)",
	    adjustment: {
	        x: 0,
	        y: 0.25
	    },
	    textureOn: false
	});
	
	grid_Options.grid3 = init(ctx, {
	    gridSize: gridSize3,
	    scale: {x:120, y:140},
	    color: "rgba(155,155,155,0.6)",
	    textureOn: false
	})	
	textureGrid = createGrid(grid_Options.grid1);		
}


$(function(){
    var canvas = $("canvas#hexgrid");
	var DOMcanvas = document.getElementById('hexgrid');
	ctx = DOMcanvas.getContext("2d");
	
	initGridOptions();
		
    var checkboxes = $(':checkbox');
	checkboxes.click(gridChoiceHandler);
	checkThem([
		{id:'grid1', state: grid1_on}, 
		{id:'grid2', state: grid2_on}, 
		{id:'grid3', state: grid3_on},
		{id:'compass', state: compass_on},
		{id:'coords', state: coords_on}
	]);
			
	$('.terrainChoice').click(toggleTerrainSelected);
	$('.decorChoice').click(toggleDecorSelected);
	$('.pathChoice').click(togglePathSelected);			
	
  	// The pencil tool instance.
  	tool = new tool_pencil();
	
	canvas.mousedown(ev_canvas);            				     
	canvas.mouseup(ev_canvas);            				     
	canvas.mousemove(ev_canvas); 
	draw();           				     	
});